import React, { Component } from 'react';
import './index.scss';
import Viewer from 'viewerjs';

class ImageViewer extends Component {
    constructor(props) {
        super(props);
	}
	
	componentDidMount() {
		let { initialViewIndex, handleClose } = this.props;
		
		this.viewer = new Viewer(document.querySelector('.image-viewer'), {
			initialViewIndex,
			hidden() {
				handleClose();
			}
		});
		this.viewer.show();
	}

	componentWillUnmount() {
		this.viewer && this.viewer.destroy();
	}

    render() {
		let { images } = this.props;

        return (
			<div className="image-viewer">
				<div className="bd" style={{display: 'none'}}>
					{ images.map((image, index) => <img src={image} alt="" key={index} />) }
				</div>
			</div>
		);
    }
}

export default ImageViewer;
